<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span class="title">用户管理</span>
        <div class="extra">
          <el-button type="primary" @click="showAddDialog">
            <el-icon><Plus /></el-icon>添加用户
          </el-button>
        </div>
      </div>
    </template>

    <router-view></router-view>

    <!-- 添加/编辑用户对话框 -->
    <UserFormDialog
        :dialogVisible="dialogFormVisible"
        @update:dialogVisible="dialogFormVisible = $event"
        :title="titleName"
        :form-data="formData"
        @submit="handleFormSubmit"
    />
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { Plus } from "@element-plus/icons-vue"
import UserFormDialog from './components/UserFormDialog.vue'

const dialogFormVisible = ref(false)
const titleName = ref('添加用户')
const formData = ref({
  // 表单数据...
})

const showAddDialog = () => {
  resetForm()
  dialogFormVisible.value = true
}

const handleFormSubmit = () => {
  // 处理表单提交
}

const resetForm = () => {
  // 重置表单
}
</script>

<style scoped>
/* 样式保持不变 */
</style>